<template>
  <div class="shop-process-container page-shop-process">
    <div class="sp-wrapper">
      <div
        v-if="applyStep > 0"
        class="info-frame"
      >
        <div class="sbi-title title">
          {{ $t('shop.createStore') }}
        </div>

        <div class="sbi-content content">
          <!-- 步骤 -->
          <div
            class="progress-bar"
            :class="lang === 'en' ? 'en-progress-bar' : 'zh-progress-bar'"
          >
            <div
              class="first-step step"
              :class="{'active-step':applyStep>0}"
            >
              <div class="step-item">
                <div class="si-wrapper">
                  <div class="step-num">
                    1
                  </div>
                  <div class="step-text">
                    {{ $t('shopProcess.businessInfo') }}
                  </div>
                </div>
              </div>
            </div>
            <div
              class="second-step step"
              :class="{'active-step':applyStep>1}"
            >
              <div class="step-item">
                <div class="si-wrapper">
                  <div class="step-num">
                    2
                  </div>
                  <div class="step-text">
                    {{ $t('pcdecorate.shopMessage.storeMessage') }}
                  </div>
                </div>
              </div>
            </div>
            <div
              class="third-step step"
              :class="{'active-step':applyStep>2}"
            >
              <div class="step-item">
                <div class="si-wrapper">
                  <div class="step-num">
                    3
                  </div>
                  <div class="step-text">
                    {{ $t('shopProcess.signUpInfo') }}
                  </div>
                </div>
              </div>
            </div>
            <div
              class="fourth-step step"
              :class="{'active-step':applyStep>3}"
            >
              <div class="step-item">
                <div class="si-wrapper">
                  <div class="step-num">
                    4
                  </div>
                  <div class="step-text">
                    {{ $t('shopProcess.financeInfo') }}
                  </div>
                </div>
              </div>
            </div>
            <div
              class="fourth-step step"
              :class="{'active-step':applyStep>4}"
            >
              <div class="step-item">
                <div class="si-wrapper">
                  <div class="step-num">
                    5
                  </div>
                  <div class="step-text">
                    {{ $t('shopProcess.registerInfo') }}
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 第一步 基本信息 -->
          <div
            v-if="applyStep === 2"
            class="shop-base-info"
            :class="lang === 'en' ? 'en-base-info' : 'zh-base-info'"
          >
            <div class="company-info">
              <el-form
                ref="shopDetailRef"
                :model="shopDetail"
                :rules="shopDetailRule"
                class="base-info"
                label-width="120px"
                @submit.prevent
              >
                <el-divider content-position="left">
                  {{ $t('pcdecorate.shopMessage.storeMessage') }}
                </el-divider>
                <div
                  class="ci-wrapper"
                  style="justify-content: flex-start;"
                >
                  <div class="left-info">
                    <el-form-item
                      :label="$t('shopProcess.logo')"
                      prop="shopLogo"
                    >
                      <div>
                        <div class="business-license-box">
                          <div class="license-content">
                            <img-upload
                              v-model="shopDetail.shopLogo"
                              @input="imgChange(shopDetail.shopLogo, 'shopLogo', 'shopDetailRef')"
                            />
                          </div>
                        </div>
                        <div class="upload-tips">
                          {{ $t('shopProcess.shopLogoPicTips') + $t('shopProcess.logoTips') }}
                        </div>
                      </div>
                    </el-form-item>

                    <el-form-item
                      :label="$t('shopProcess.shopName')"
                      prop="shopName"
                    >
                      <el-input
                        v-model="shopDetail.shopName"
                        :placeholder="$t('shopProcess.shopNameInputTips')"
                        maxlength="20"
                        @blur="
                          shopDetail.shopName =
                            shopDetail.shopName ?
                              removeHeadAndTailSpaces(shopDetail.shopName) :
                              shopDetail.shopName
                        "
                      />
                    </el-form-item>

                    <el-form-item
                      label="商城首字母"
                      prop="firstLetter"
                    >
                      <el-input
                        v-model="shopDetail.firstLetter"
                        placeholder="请输入商城首字母"
                        maxlength="1"
                        show-word-limit
                        @blur="
                          shopDetail.firstLetter =
                            shopDetail.firstLetter ?
                              removeHeadAndTailSpaces(shopDetail.firstLetter) :
                              shopDetail.firstLetter
                        "
                      />
                    </el-form-item>

                    <el-form-item
                      label="商城供应商"
                      prop="shopSupplier"
                    >
                      <el-input
                        v-model="shopDetail.shopSupplier"
                        placeholder="请输入商城供应商"
                        maxlength="20"
                        show-word-limit
                        @blur="
                          shopDetail.shopSupplier =
                            shopDetail.shopSupplier ?
                              removeHeadAndTailSpaces(shopDetail.shopSupplier) :
                              shopDetail.shopSupplier
                        "
                      />
                    </el-form-item>

                    <el-form-item
                      :label="$t('shopProcess.intro')"
                      prop="intro"
                    >
                      <div
                        class="business-license-box"
                        style="width: 100%"
                      >
                        <div class="license-content">
                          <el-input
                            v-model="shopDetail.intro"
                            type="textarea"
                            maxlength="200"
                            :rows="4"
                            :placeholder="$t('shopProcess.introInput')"
                            @blur="
                              shopDetail.intro =
                                shopDetail.intro ?
                                  removeHeadAndTailSpaces(shopDetail.intro) :
                                  shopDetail.intro
                            "
                          />
                        </div>
                      </div>
                    </el-form-item>
                  </div>
                </div>

                <el-divider content-position="left">
                  {{ $t('shopProcess.merchantInfo') }}
                </el-divider>
                <div
                  class="ci-wrapper"
                  style="justify-content: flex-start;"
                >
                  <div class="left-info">
                    <el-form-item
                      :label="$t('shopProcess.merchantLogo')"
                      prop="merchantLogo"
                    >
                      <div>
                        <div class="business-license-box">
                          <div class="license-content">
                            <img-upload
                              v-model="shopDetail.merchantLogo"
                              @input="imgChange(shopDetail.merchantLogo, 'merchantLogo', 'shopDetailRef')"
                            />
                          </div>
                        </div>
                        <div class="upload-tips">
                          {{ $t('shopProcess.shopLogoPicTips') + $t('shopProcess.logoTips') }}
                        </div>
                      </div>
                    </el-form-item>

                    <el-form-item
                      :label="$t('shopProcess.merchantName')"
                      prop="merchantName"
                    >
                      <el-input
                        v-model="shopDetail.merchantName"
                        :placeholder="$t('shopProcess.merchantNameInputTips')"
                        maxlength="50"
                        disabled
                        @blur="
                          shopDetail.merchantName =
                            shopDetail.merchantName ?
                              removeHeadAndTailSpaces(shopDetail.merchantName) :
                              shopDetail.merchantName
                        "
                      />
                    </el-form-item>

                    <el-form-item
                      :label="$t('shopProcess.merchantShortName')"
                      prop="merchantShortName"
                    >
                      <el-input
                        v-model="shopDetail.merchantShortName"
                        :placeholder="$t('shopProcess.merchantShortNameInputTips')"
                        maxlength="10"
                        @blur="
                          shopDetail.merchantShortName =
                            shopDetail.merchantShortName ?
                              removeHeadAndTailSpaces(shopDetail.merchantShortName) :
                              shopDetail.merchantShortName
                        "
                      />
                    </el-form-item>

                    <el-form-item
                      :label="$t('shopProcess.mainProduct')"
                      prop="mainProduct"
                    >
                      <el-input
                        v-model="shopDetail.mainProduct"
                        :placeholder="$t('shopProcess.mainProductsInputTips')"
                        maxlength="500"
                        show-word-limit
                        @blur="
                          shopDetail.mainProduct =
                            shopDetail.mainProduct ?
                              removeHeadAndTailSpaces(shopDetail.mainProduct) :
                              shopDetail.mainProduct
                        "
                      />
                    </el-form-item>

                    <el-form-item
                      :label="$t('shopProcess.tel')"
                      prop="tel"
                    >
                      <el-input
                        :model-value="shopDetail.tel"
                        :placeholder="$t('shopProcess.telInputTips')"
                        maxlength="11"
                        @input="onShopDetailTelInput"
                      />
                    </el-form-item>

                    <!-- 商家电话 -->
                    <el-form-item
                      :label="$t('shopProcess.merchantPhone')"
                      prop="merchantPhone"
                    >
                      <el-input
                        v-model="shopDetail.merchantPhone"
                        :placeholder="$t('tip.input') + $t('shopProcess.merchantPhone')"
                        oninput="value=value.replace(/[^\d\-\d]/g,'')"
                      />
                    </el-form-item>

                    <el-form-item
                      :label="$t('sys.email')"
                      prop="merchantMail"
                    >
                      <el-input
                        v-model="shopDetail.merchantMail"
                        :placeholder="$t('tip.input') + $t('sys.email')"
                        @blur="
                          shopDetail.merchantMail =
                            shopDetail.merchantMail ?
                              removeHeadAndTailSpaces(shopDetail.merchantMail) :
                              shopDetail.merchantMail
                        "
                      />
                    </el-form-item>

                    <el-form-item
                      :label="$t('shopProcess.officeWeb')"
                      prop="merchantWebsite"
                    >
                      <el-input
                        v-model="shopDetail.merchantWebsite"
                        :placeholder="$t('tip.input') + $t('shopProcess.officeWeb')"
                        maxlength="100"
                        @blur="
                          shopDetail.merchantWebsite =
                            shopDetail.merchantWebsite ?
                              removeHeadAndTailSpaces(shopDetail.merchantWebsite) :
                              shopDetail.merchantWebsite
                        "
                      />
                    </el-form-item>

                    <el-form-item
                      :label="$t('shopProcess.companyAdv')"
                      prop="merchantSlogan"
                    >
                      <div
                        class="business-license-box"
                        style="width: 100%"
                      >
                        <div class="license-content">
                          <el-input
                            v-model="shopDetail.merchantSlogan"
                            type="textarea"
                            maxlength="200"
                            show-word-limit
                            :rows="4"
                            :placeholder="$t('tip.input') + $t('shopProcess.companyAdv')"
                            @blur="
                              shopDetail.merchantSlogan =
                                shopDetail.merchantSlogan ?
                                  removeHeadAndTailSpaces(shopDetail.merchantSlogan) :
                                  shopDetail.merchantSlogan
                            "
                          />
                        </div>
                      </div>
                    </el-form-item>
                  </div>
                  <div class="right-info">
                    <el-form-item
                      :label="$t('shopProcess.companyPic')"
                      prop="promotionalImg"
                    >
                      <div>
                        <div class="business-license-box">
                          <div class="license-content">
                            <img-upload
                              v-model="shopDetail.promotionalImg"
                              @input="imgChange(shopDetail.promotionalImg, 'promotionalImg', 'shopDetailRef')"
                            />
                          </div>
                        </div>
                        <div class="upload-tips">
                          {{ $t('shopProcess.shopLogoPicTips') + $t('shopProcess.logoTips') }}
                        </div>
                      </div>
                    </el-form-item>
                  </div>
                </div>
              </el-form>
            </div>
          </div>

          <!-- 第二步 工商信息 -->
          <div
            v-if="applyStep === 1"
            class="company-info"
          >
            <el-form
              ref="shopCompanyRef"
              :model="shopCompany"
              :rules="shopCompanyRule"
              label-width="150px"
              @submit.prevent
            >
              <div class="ci-wrapper">
                <div class="left-info">
                  <el-form-item
                    :label="$t('shopProcess.creditCode')"
                    prop="creditCode"
                  >
                    <el-input
                      v-model="shopCompany.creditCode"
                      maxlength="20"
                      :placeholder="$t('shopProcess.creditCodeInputTips')"
                    />
                  </el-form-item>
                  <el-form-item
                    :label="$t('shopProcess.firmName')"
                    prop="firmName"
                  >
                    <el-input
                      v-model="shopCompany.firmName"
                      maxlength="50"
                      :placeholder="$t('shopProcess.firmNameInputTips')"
                      @blur="
                        shopCompany.firmName =
                          shopCompany.firmName ?
                            removeHeadAndTailSpaces(shopCompany.firmName) :
                            shopCompany.firmName
                      "
                    />
                  </el-form-item>
                  <el-form-item :label="$t('shopProcess.residence')">
                    <el-input
                      v-model="shopCompany.residence"
                      prop="residence"
                      maxlength="50"
                      :placeholder="$t('shopProcess.residenceInputTips')"
                      @blur="
                        shopCompany.residence =
                          shopCompany.residence ?
                            removeHeadAndTailSpaces(shopCompany.residence) :
                            shopCompany.residence
                      "
                    />
                  </el-form-item>
                  <el-form-item
                    :label="$t('shopProcess.representative')"
                    prop="representative"
                  >
                    <el-input
                      v-model="shopCompany.representative"
                      prop="representative"
                      maxlength="20"
                      :placeholder="$t('shopProcess.representativeInputTips')"
                      @blur="
                        shopCompany.representative =
                          shopCompany.representative ?
                            removeHeadAndTailSpaces(shopCompany.representative) :
                            shopCompany.representative
                      "
                    />
                  </el-form-item>
                  <el-form-item
                    v-if="paySettlementType===1"
                    :label="$t('allinpay.corporateIdentityCard')"
                    prop="legalIds"
                  >
                    <el-input
                      v-model="shopCompany.legalIds"
                      maxlength="18"
                      :placeholder="$t('allinpay.pleaseEnterIDCard')"
                      :disabled="isNotEdit"
                    />
                  </el-form-item>
                  <el-form-item
                    v-if="paySettlementType===1"
                    :label="$t('allinpay.legalPhone')"
                    prop="legalPhone"
                  >
                    <el-input
                      v-model="shopCompany.legalPhone"
                      maxlength="11"
                      :placeholder="$t('allinpay.pleaseEnterLegalPhone')"
                      :disabled="isNotEdit"
                      @input="(val)=>{shopCompany.legalPhone=val.replace(/[^\d]/g,'')}"
                    />
                  </el-form-item>
                  <el-form-item
                    :label="$t('shopProcess.capital')"
                    class="capital-int"
                  >
                    <el-input
                      v-model="shopCompany.capital"
                      prop="capital"
                      style="width: 200px"
                      :min="0"
                      :max="99999999"
                      @blur="changeNum"
                      @keydown="channelInputLimit"
                    />
                    <span class="price-unit-text">{{ $t("shopProcess.tenThousandYuan") }}</span>
                  </el-form-item>
                  <el-form-item
                    :label="$t('shopProcess.fountTime')"
                    prop="foundTime"
                  >
                    <el-date-picker
                      v-model="shopCompany.foundTime"
                      style="width:200px"
                      type="date"
                      value-format="YYYY-MM-DD HH:mm:ss"
                      :placeholder="$t('platform.seleData')"
                      :picker-options="pickerOptions"
                    />
                  </el-form-item>
                  <el-form-item
                    :label="$t('shopProcess.businessTime')"
                    prop="startTime"
                  >
                    <div style="display: flex">
                      <el-date-picker
                        v-model="shopCompany.startTime"
                        style="width:162px;"
                        type="date"
                        value-format="YYYY-MM-DD HH:mm:ss"
                        :placeholder="$t('shopProcess.startTime')"
                        clearable
                        :picker-options="pickerOptionsStart"
                        @change="onValidateTime('startTime')"
                      />
                      <span style="margin: 0 10px">-</span>
                      <el-date-picker
                        ref="endTimeRef"
                        v-model="shopCompany.endTime"
                        style="width:162px;"
                        type="date"
                        value-format="YYYY-MM-DD HH:mm:ss"
                        :placeholder="endTimeFlag &&shopCompany.startTime&& !shopCompany.endTime ? $t('shopProcess.noFixedTerm') : $t('shopProcess.endTime')"
                        clearable
                        :picker-options="pickerOptionsEnd"
                        :disabled="!shopCompany.startTime"
                        @change="onValidateTime('endTime')"
                        @focus="endTimeFlag = false"
                        @blur="endTimeFlag = true"
                      />
                    </div>
                  </el-form-item>
                  <el-form-item
                    :label="$t('shopProcess.businessScope')"
                    prop="businessScope"
                    style="margin-bottom:30px;"
                  >
                    <el-input
                      v-model="shopCompany.businessScope"
                      type="textarea"
                      resize="none"
                      :rows="4"
                      :placeholder="$t('shopProcess.businessScopeInputTips')"
                      maxlength="500"
                      @blur="
                        shopCompany.businessScope =
                          shopCompany.businessScope ?
                            removeHeadAndTailSpaces(shopCompany.businessScope) :
                            shopCompany.businessScope
                      "
                    />
                  </el-form-item>
                </div>
                <div class="right-info">
                  <!-- 工商信息 -->
                  <el-form-item
                    :label="$t('shopProcess.businessLicense')"
                    prop="businessLicense"
                  >
                    <div class="business-license-box">
                      <div class="license-content">
                        <img-upload
                          v-model="shopCompany.businessLicense"
                          @input="imgChange(shopCompany.businessLicense, 'businessLicense', 'shopCompanyRef')"
                        />
                        <div class="example-box">
                          <img
                            src="@/assets/img/example-img/Business-license.png"
                            alt
                          >
                          <div class="tips">
                            {{ $t('shopProcess.example') }}
                          </div>
                        </div>
                      </div>
                      <div class="upload-tips business-tip">
                        {{ $t('shopProcess.logoTips') }}
                      </div>
                    </div>
                  </el-form-item>
                  <div class="id-box">
                    <div class="upload-content">
                      <div class="upload-img">
                        <el-form-item
                          class="idcard"
                          :label="$t('shopProcess.corporateIdentityCard')"
                          prop="identityCardFront"
                        >
                          <img-upload
                            v-model="shopCompany.identityCardFront"
                            @input="imgChange(shopCompany.identityCardFront, 'identityCardFront', 'shopCompanyRef')"
                          />
                        </el-form-item>
                        <el-form-item
                          class="idcard"
                          label-width="0"
                          prop="identityCardLater"
                        >
                          <img-upload
                            v-model="shopCompany.identityCardLater"
                            @input="imgChange(shopCompany.identityCardLater, 'identityCardLater', 'shopCompanyRef')"
                          />
                        </el-form-item>
                      </div>
                      <el-form-item>
                        <div class="upload-example">
                          <div class="example-box">
                            <img
                              src="@/assets/img/example-img/idcard1.png"
                              alt
                            >
                            <div class="tips">
                              {{ $t('shopProcess.identityCardFront') }}
                            </div>
                          </div>
                          <div class="example-box">
                            <img
                              src="@/assets/img/example-img/idcard2.png"
                              alt
                            >
                            <div class="tips">
                              {{ $t('shopProcess.identityCardLater') }}
                            </div>
                          </div>
                        </div>
                        <div class="upload-tips business-tip">
                          {{ $t('shopProcess.identityCardTips') }}
                        </div>
                      </el-form-item>
                    </div>
                  </div>
                </div>
              </div>
            </el-form>
          </div>

          <!-- 第三步 签约信息 -->
          <div
            v-if="applyStep === 3"
            class="content-wrapper signing-content"
          >
            <!-- 签约类目 -->
            <div class="s-category-item s-item">
              <div class="table-data-title">
                <div class="text">
                  <!-- <span class="stress">*</span> -->
                  {{ $t('shopProcess.signingCategory') }}
                </div>
                <div class="tips">
                  {{ $t('shopProcess.chosen') }}
                  <span class="txt-bold">{{ signCategoryList.length }}</span>
                  {{ $t('shopProcess.piece') }}{{ $t('shopProcess.category') }}，{{ $t('shopProcess.mostAdd') }}
                  <span class="txt-bold">200</span>
                  {{ $t('shopProcess.piece') }}{{ $t('shopProcess.category') }}
                </div>
              </div>
              <div class="si-content">
                <category-add-or-update
                  ref="cateAddOrUpdateRef"
                  :sign-category-list="signCategoryList"
                  @get-sign-category-list="getSignCategoryList"
                />
              </div>
            </div>
            <!-- 签约品牌 -->
            <div class="s-brand-item s-item">
              <div class="table-data-title">
                <div class="text">
                  {{ $t('shopProcess.signingBrand') }}
                </div>
                <div class="tips">
                  {{ $t('shopProcess.chosen') }}
                  <span class="txt-bold">{{ signBrandList.length }}</span>
                  {{ $t('shopProcess.piece') }}{{ $t('shopProcess.brand') }}，{{ $t('shopProcess.mostAdd') }}
                  <span class="txt-bold">50</span>
                  {{ $t('shopProcess.piece') }}{{ $t('shopProcess.brand') }}
                </div>
              </div>
              <div class="si-content">
                <brand-add-or-update
                  ref="brandAddOrUpdateRef"
                  :brand-signing-list="signBrandList"
                  @get-sign-brand-list="getSignBrandList"
                />
              </div>
            </div>

            <!-- 签约信息 -->
            <div
              v-if="paySettlementType!==1"
              class="contract-info s-item"
            >
              <el-form
                ref="contractInfoRef"
                :model="contractInfo"
                :rules="contractInfoRule"
                class="base-info"
                label-width="auto"
                @submit.prevent
              >
                <!-- 试用 -->
                <el-form-item
                  label="是否试用"
                  prop="hasTry"
                >
                  <el-radio-group
                    v-model="shopDetail.hasTry"
                    @change="onChangeUse"
                  >
                    <el-radio :label="1">
                      {{ $t('publics.yes') }}
                    </el-radio>
                    <el-radio :label="0">
                      {{ $t('publics.no') }}
                    </el-radio>
                  </el-radio-group>
                </el-form-item>

                <el-form-item
                  label="商城版本"
                  prop="mallVersion"
                >
                  <el-radio-group
                    v-model="shopDetail.mallVersion"
                    :disabled="shopDetail.hasTry==1"
                    @change="onChangeVer"
                  >
                    <el-radio :label="1">
                      免费版
                    </el-radio>
                    <el-radio :label="2">
                      基础版
                    </el-radio>
                    <el-radio :label="3">
                      标准版
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
                <!-- 签约有效期 -->
                <el-form-item
                  :label="$t('shopProcess.validityPeriodOfContract')"
                  prop="contractStartTime"
                >
                  <div class="contract-time-box">
                    <el-date-picker
                      v-model="contractInfo.contractStartTime"
                      style="width:170px;"
                      type="date"
                      value-format="YYYY-MM-DD HH:mm:ss"
                      :placeholder="$t('shopProcess.startTime')"
                      :clearable="false"
                    />
                    <span style="margin: 0 10px">-</span>
                    <span class="end-time">
                      <el-date-picker
                        ref="endTimeRef"
                        v-model="contractInfo.contractEndTime"
                        style="width:170px;"
                        type="date"
                        value-format="YYYY-MM-DD HH:mm:ss"
                        :placeholder="endTimeFlag &&contractInfo.contractStartTime&& !contractInfo.contractEndTime ? $t('shopProcess.noFixedTerm') : $t('shopProcess.endTime')"
                        clearable
                        @change="endTimeFlag = false"
                        @focus="endTimeFlag = false"
                        @blur="endTimeFlag = true"
                      />
                    </span>
                  </div>
                </el-form-item>
                <!-- 商城类型 -->
                <el-form-item
                  :label="$t('shopProcess.shopType')"
                  prop="type"
                >
                  <el-radio-group
                    v-model="shopDetail.type"
                    :disabled="shopDetail.hasTry==1 || shopDetail.mallVersion!=3"
                  >
                    <el-radio :label="0">
                      {{ $t('shopProcess.ordinaryShop') }}
                    </el-radio>
                    <el-radio :label="1">
                      {{ $t('shopProcess.preferredGoodShop') }}
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-form>
            </div>
          </div>

          <!-- 第四步 财务信息 -->
          <div
            v-if="applyStep === 4"
            class="content-wrapper finance-info"
          >
            <div
              v-if="paySettlementType!==1"
              class="table-data-title"
            >
              <div class="text">
                <!-- <span class="stress">*</span> -->
                {{ $t('shopProcess.settlementAccount') }}
              </div>
              <div class="tips">
                {{ $t('shopProcess.added') }}
                <span class="txt-bold">{{ bankCartInfoForm.data.length }}</span>
                {{ $t('shopProcess.piece') }}&nbsp;{{
                  $t('shopProcess.settlementAccount')
                }}，{{ $t('shopProcess.mostAdd') }}
                <span class="txt-bold">5</span>
                {{ $t('shopProcess.piece') }}&nbsp;{{
                  $t('shopProcess.settlementAccount')
                }}，{{ $t('shopProcess.settlementAccountEditTips') }}
              </div>
              <div
                class="default-btn primary-btn edit-btn"
                @click="addBankInfo"
              >
                {{ $t('brand.add') }}
              </div>
            </div>
            <div
              v-else
              class="table-data-title"
            >
              <div class="text">
                <!-- <span class="stress">*</span> -->
                {{ $t('allinpay.clearingBankAccount') }}
              </div>
              <div class="tips">
                {{ $t('allinpay.pleaseAddPublicAccount') }}
              </div>
            </div>
            <div class="fi-content">
              <!-- 添加图表 -->
              <!-- 审核状态applyStatus 0 未审核 1已通过 -1未通过 -->
              <template v-if="paySettlementType!==1">
                <el-form
                  ref="bankCartInfoFormRef"
                  :model="bankCartInfoForm"
                  :rules="bankCartInfoForm.rule"
                  @submit.prevent
                >
                  <el-table
                    class="add-bank-info-table"
                    :data="bankCartInfoForm.data"
                    header-cell-class-name="table-header"
                    style="width: 100%"
                  >
                    <el-table-column
                      type="index"
                      :label="$t('brand.serialNumber')"
                      width="80px"
                    />
                    <el-table-column
                      prop="bankName"
                      :label="$t('shopProcess.bankName')"
                    >
                      <template #default="scope">
                        <el-form-item
                          :prop="'data.' + scope.$index + '.bankName'"
                          :rules="bankCartInfoForm.rule.bankName"
                        >
                          <el-input
                            v-model="scope.row.bankName"
                            :placeholder="$t('shopProcess.brandNameInputTips')"
                            maxlength="20"
                            @blur="
                              scope.row.bankName =
                                scope.row.bankName ?
                                  removeHeadAndTailSpaces(scope.row.bankName) :
                                  scope.row.bankName
                            "
                          />
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="recipientName"
                      :label="$t('shopProcess.recipientName')"
                    >
                      <template #default="scope">
                        <el-form-item
                          :prop="'data.' + scope.$index + '.recipientName'"
                          :rules="bankCartInfoForm.rule.recipientName"
                        >
                          <el-input
                            v-model="scope.row.recipientName"
                            maxlength="20"
                            :placeholder="$t('shopProcess.recipientNameInputTips')"
                            @blur="
                              scope.row.recipientName =
                                scope.row.recipientName ?
                                  removeHeadAndTailSpaces(scope.row.recipientName) :
                                  scope.row.recipientName
                            "
                          />
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <!-- 账号 -->
                    <el-table-column
                      prop="cardNo"
                      :label="$t('shopProcess.account')"
                    >
                      <template #default="scope">
                        <el-form-item
                          :prop="'data.' + scope.$index + '.cardNo'"
                          :rules="bankCartInfoForm.rule.cardNo"
                        >
                          <el-input
                            v-model="scope.row.cardNo"
                            maxlength="30"
                            oninput="value=value.replace(/[^\d]/g,'')"
                            :placeholder="$t('shopProcess.cardNoInputTips')"
                            @blur="verifyDuplicates(scope.row, scope.$index)"
                          />
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="openingBank"
                      :label="$t('shopProcess.openingBank')"
                    >
                      <template #default="scope">
                        <el-form-item
                          :prop="'data.' + scope.$index + '.openingBank'"
                          :rules="bankCartInfoForm.rule.openingBank"
                        >
                          <el-input
                            v-model="scope.row.openingBank"
                            :placeholder="$t('shopProcess.branchInputTips')"
                            maxlength="30"
                            @blur="
                              scope.row.openingBank =
                                scope.row.openingBank ?
                                  removeHeadAndTailSpaces(scope.row.openingBank) :
                                  scope.row.openingBank
                            "
                          />
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column width="50px">
                      <template #default="scope">
                        <el-icon
                          v-if="bankCartInfoForm.data.length > 1"
                          @click="deleteBankInfoItem(scope.$index)"
                        >
                          <Remove />
                        </el-icon>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-form>
              </template>
              <template v-else>
                <el-form
                  ref="allinpayShopBankCardFormRef"
                  size="small"
                  :model="allinpayShopBankCardForm"
                  :rules="allinpayShopBankCardForm.rule"
                  @submit.prevent
                >
                  <el-table
                    ref="bankTable"
                    class="add-bank-info-table"
                    :data="allinpayShopBankCardForm.data"
                    :header-cell-style="{height:'50px',background:'#F5F5F5',color:'#000','font-weight': '400'}"
                    style="width: 100%"
                  >
                    <el-table-column
                      type="index"
                      :label="$t('allinpay.serialNumber')"
                      width="80"
                    />
                    <el-table-column
                      prop="parentBankName"
                      :label="$t('allinpay.bankName')"
                    >
                      <template #default="scope">
                        <el-form-item
                          :prop="'data.' + scope.$index + '.parentBankName'"
                          :rules="allinpayShopBankCardForm.rule.parentBankName"
                        >
                          <el-select
                            v-model="selectBank"
                            filterable
                            :placeholder="$t('allinpay.pleaseSelect')"
                            @change="changeBank"
                          >
                            <el-option
                              v-for="item in bankList"
                              :key="item.bankId"
                              :label="item.bankName"
                              :value="item.bankName"
                            />
                          </el-select>
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="bankName"
                      :label="$t('allinpay.branchName')"
                    >
                      <template #default="scope">
                        <el-form-item
                          :prop="'data.' + scope.$index + '.bankName'"
                          :rules="allinpayShopBankCardForm.rule.bankName"
                        >
                          <el-input
                            v-model="scope.row.bankName"
                            maxlength="20"
                            :placeholder="$t('allinpay.forExample')+'南京市雨花区雨花支行'"
                          />
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="accountNo"
                      :label="$t('allinpay.businessPublicAccounts')"
                    >
                      <template #default="scope">
                        <el-form-item
                          :prop="'data.' + scope.$index + '.accountNo'"
                          :rules="allinpayShopBankCardForm.rule.accountNo"
                        >
                          <el-input
                            v-model.trim="scope.row.accountNo"
                            maxlength="19"
                            oninput="value=value.replace(/[^\d]/g,'')"
                            :placeholder="$t('allinpay.pleaseEntePublicAccount')"
                          />
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="unionBank"
                      :label="$t('allinpay.paymentLineNumber')"
                    >
                      <template #default="scope">
                        <el-form-item
                          :prop="'data.' + scope.$index + '.unionBank'"
                          :rules="allinpayShopBankCardForm.rule.unionBank"
                        >
                          <el-input
                            v-model="scope.row.unionBank"
                            :placeholder="$t('allinpay.pleaseEnterDigitLineNumber')"
                            oninput="value=value.replace(/[^\d]/g,'')"
                            maxlength="12"
                          />
                        </el-form-item>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-form>
              </template>
            </div>
          </div>

          <!-- 第五步 注册信息 -->
          <div
            v-if="applyStep === 5"
            class="content-wrapper"
          >
            <div class="register-info">
              <el-form
                ref="shopUserRegisterInfoRef"
                :model="shopUserRegisterInfo"
                :rules="shopUserRegisterRule"
                label-width="auto"
                @submit.prevent
              >
                <el-form-item
                  :label="$t('sys.userName')"
                  prop="username"
                >
                  <el-input
                    v-model="shopUserRegisterInfo.username"
                    maxlength="16"
                    :placeholder="$t('shopProcess.userNameRule')"
                  />
                </el-form-item>
                <el-form-item
                  :label="$t('sys.password')"
                  prop="password"
                  class="password"
                >
                  <el-input
                    v-model="shopUserRegisterInfo.password"
                    v-input-rule
                    type="password"
                    :show-password="true"
                    maxlength="20"
                    :placeholder="$t('shopProcess.passwordRule')"
                  />
                </el-form-item>
                <el-form-item
                  :label="$t('users.phoneNumber')"
                  prop="mobile"
                >
                  <div class="mobile-box">
                    <el-input
                      v-model="shopUserRegisterInfo.mobile"
                      class="mobile-int"
                      maxlength="11"
                      :placeholder="$t('shopProcess.mobileRule')"
                    >
                      <template #append>
                        <div
                          class="mobile-btn"
                          @click="getRegisterCode"
                        >
                          {{ showGetCodeBtn ? $t('shop.getVerificationCode') : count + ' s' }}
                        </div>
                      </template>
                    </el-input>
                  </div>
                </el-form-item>
                <el-form-item
                  :label="$t('home.verificationCode')"
                  prop="validCode"
                >
                  <el-input
                    v-model="shopUserRegisterInfo.validCode"
                    :placeholder="$t('shop.pleaseEnteCode')"
                    maxlength="6"
                  />
                </el-form-item>
              </el-form>
            </div>
          </div>

          <div class="footer-box btn-row">
            <div
              v-if="applyStep !== 1"
              class="default-btn"
              @click="toPrevStep"
            >
              {{ $t('shopProcess.previousStep') }}
            </div>
            <div
              v-if="applyStep !== 5"
              class="default-btn primary-btn"
              @click="toNextStep"
            >
              {{ $t('shopProcess.nextStep') }}
            </div>
            <div
              v-if="applyStep == 3"
              class="default-btn primary-btn"
              @click="toNextStep"
            >
              {{ $t('shopProcess.jumpStep') }}
            </div>
            <div
              v-if="applyStep === 5"
              class="default-btn primary-btn"
              @click="toNextStep"
            >
              {{ $t('shop.createStore') }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import CategoryAddOrUpdate from './components/category-add-or-update/index.vue'
import BrandAddOrUpdate from './components/brand-add-or-update/index.vue'
import {
  isMobile,
  validEmail,
  isCreditCode,
  isUserName,
  validNoEmptySpace,
  removeHeadAndTailSpaces,
  checkIDCard,
  validPassword,
  isTel
} from '@/utils/validate.js'
import moment from 'moment'
import { encrypt } from '@/utils/crypto.js'
import { ElMessage } from 'element-plus'
import { reactive } from 'vue'
import { getParseTime } from '@/utils/datetime'

const router = useRouter()

// 语言
const lang = ref(localStorage.getItem('bbcLang'))
const isNotEdit = ref(false) // 是否不可以编辑信息, 当申请状态为待审核时不能编辑

const shopDetail = reactive({
  merchantName: '',
  merchantShortName: '',
  mainProduct: '',
  firstLetter: '',
  shopSupplier: '',
  shopName: '',
  tel: '',
  shopLogo: '',
  intro: '',
  type: 0,
  hasTry: 0,
  mallVersion: 1,
  merchantLogo: '',
  promotionalImg: '',
  merchantSlogan: '',
  merchantWebsite: '',
  merchantMail: '',
  merchantPhone: ''
})

const validateMobile = (rule, value, callback) => {
  if (!isMobile(value)) {
    callback(new Error($t('shopProcess.telErrorTips')))
  } else {
    callback()
  }
}

const validateEmail = (rule, value, callback) => {
  if (!value) callback()
  if (!validEmail(value) || value.indexOf(' ') !== -1) {
    callback(new Error($t('shopProcess.emailErrorTips')))
  } else {
    callback()
  }
}

const vaildCreditCode = (rule, value, callback) => {
  if (!isCreditCode(value)) {
    callback(new Error($t('shopProcess.creditCodeErrorTips')))
  } else {
    // 检查统一信用码是否已存在
    http({
      url: http.adornUrl('/platform/shopCompany/checkCreditCode'),
      method: 'GET',
      params: http.adornParams({
        creditCode: value,
        shopId: -1
      })
    }).then(({ data }) => {
      if (data) {
        callback(new Error($t('shopProcess.creditCodeRule')))
      } else {
        callback()
      }
    }).catch(() => {
      callback()
    })
  }
}

const vaildUserName = (rule, value, callback) => {
  if (!isUserName(value)) {
    callback(new Error($t('shopProcess.userNameRule2')))
  } else {
    callback()
  }
}

// 密码
const validatePassword = (rule, value, callback) => {
  if (!validPassword(value)) {
    callback(new Error($t('passwordVerification')))
  } else {
    callback()
  }
}

const validEmptyTab = (rule, value, callback) => {
  if (validNoEmptySpace(value)) {
    callback(new Error($t('shopProcess.inputAllSpace')))
  } else {
    callback()
  }
}

// 检查商城名称是否已存在
const validShopName = (rule, value, callback) => {
  if (validNoEmptySpace(value)) {
    callback(new Error($t('shopProcess.inputAllSpace')))
  } else {
    http({
      url: http.adornUrl('/platform/shopDetail/checkShopName'),
      method: 'GET',
      params: http.adornParams({
        shopName: value
      })
    }).then(({ data }) => {
      if (data) {
        callback(new Error($t('shopProcess.shopNameRule')))
      } else {
        callback()
      }
    }).catch(() => {
      callback()
    })
  }
}

const validIDCard = (rule, value, callback) => {
  if (!value || !checkIDCard(value)) {
    callback(new Error($t('allinpay.PleaseEnterCorporateIDCard')))
  } else {
    callback()
  }
}
const validMobile = (rule, value, callback) => {
  if (!value || !isMobile(value)) {
    callback(new Error($t('allinpay.InputCorrectPhone')))
  } else {
    callback()
  }
}

const validateTel = (rule, value, callback) => {
  if (value) {
    if (isTel(value)) {
      callback()
    } else {
      callback(new Error($t('shopProcess.telErrorTips')))
    }
  } else {
    callback()
  }
}

// 基础信息验证
const shopDetailRule = reactive({
  firstLetter: [
    { required: true, message: '商城首字母不能为空', trigger: 'blur' }
  ],
  merchantName: [
    { required: true, message: $t('shopProcess.merchantNameNotEmpty'), trigger: 'blur' },
    // { min: 2, max: 10, message: $t('shopProcess.merchantNameErrorTips'), trigger: 'blur' },
    { validator: validEmptyTab, trigger: 'blur' }
  ],
  shopName: [
    { required: true, message: $t('shopProcess.shopNameNotEmpty'), trigger: 'blur' },
    { min: 2, max: 20, message: $t('shopProcess.shopNameInputTips'), trigger: 'blur' },
    { validator: validShopName, trigger: 'blur' }
  ],
  tel: [
    { required: true, message: $t('shopProcess.telNotEmpty'), trigger: 'blur' },
    { validator: validateTel, trigger: 'blur' }
  ],
  shopLogo: [
    { required: true, message: $t('shopProcess.logoNotEmpty'), trigger: ['blur', 'change'] }
  ],
  merchantMail: [
    { required: false, message: $t('sys.emailaNoNull'), trigger: 'blur' },
    { validator: validateEmail, trigger: 'blur' }
  ],
  merchantPhone: [
    { validator: validateTel, trigger: 'blur' }
  ]
})

// 第二步---工商信息
const shopCompany = reactive({
  creditCode: '',
  firmName: '',
  residence: '',
  representative: '',
  capital: '',
  foundTime: '',
  startTime: '',
  endTime: '',
  businessScope: '',
  businessLicense: '',
  identityCardFront: '',
  identityCardLater: '',
  legalIds: '',
  legalPhone: ''
})
// 成立日期：今日之前可选
const pickerOptions = reactive({
  disabledDate (time) {
    const date = moment().add(0, 'days').startOf('days')
    return (
      time.getTime() >= date.valueOf()
    )
  }
})
const pickerOptionsStart = reactive({
  disabledDate: time => {
    if (shopCompany.endTime) {
      return time.getTime() > new Date(shopCompany.endTime).getTime() - 86400000
    }
  }
})
const pickerOptionsEnd = reactive({
  disabledDate: time => {
    if (shopCompany.startTime) {
      return time.getTime() < new Date(shopCompany.startTime).getTime() + 86400000
    }
  }
})

const onValidateTime = (value) => {
  if (value === 'endTime') {
    endTimeFlag.value = true
    if (!shopCompany.startTime) shopCompany.endTime = undefined
  } else {
    endTimeFlag.value = false
    if (!shopCompany.startTime) shopCompany.endTime = undefined
  }
  if (shopCompany.endTime && Date.parse(shopCompany.startTime) >= Date.parse(shopCompany.endTime)) {
    ElMessage({
      message: $t('shopProcess.businessTimeTips'),
      type: 'error',
      duration: 1500
    })
    endTimeFlag.value = true
    shopCompany.endTime = undefined
  }
}

// 工商信息校验
const shopCompanyRule = reactive({
  creditCode: [
    { required: true, message: $t('shopProcess.creditCodeInputTips'), trigger: 'blur' },
    { validator: vaildCreditCode, trigger: 'blur' }
  ],
  firmName: [
    { required: true, message: $t('shopProcess.firmNameNotEmpty'), trigger: 'blur' },
    { validator: validEmptyTab, trigger: 'blur' }
  ],
  businessScope: [
    { required: true, message: $t('shopProcess.businessScopeNotEmpty'), trigger: 'blur' }
  ],
  representative: [
    { required: true, message: $t('shopProcess.representativeNotEmpty'), trigger: 'blur' },
    { validator: validEmptyTab, trigger: 'blur' }
  ],
  businessLicense: [
    { required: true, message: $t('shopProcess.businessLicenseNotEmpty'), trigger: 'change' }
  ],
  identityCardFront: [
    { required: true, message: $t('shopProcess.identityCardFrontNotEmpty'), trigger: 'change' }
  ],
  identityCardLater: [
    { required: true, message: $t('shopProcess.identityCardLaterNotEmpty'), trigger: 'change' }
  ],
  legalIds: [
    { required: true, message: $t('allinpay.corporateIdentityCardNotEmpty'), trigger: 'blur' },

    { validator: validIDCard, trigger: 'blur' }
  ],
  legalPhone: [
    { required: true, message: $t('allinpay.legalPhoneNotEmpty'), trigger: 'blur' },

    { validator: validMobile, trigger: 'blur' }
  ]
})

const allinpayShopBankCardForm = reactive({
  data: [{
    accountNo: '',
    parentBankName: '',
    bankName: '',
    unionBank: '',
    bankCardPro: 1
  }],
  rule: {
    bankName: [
      { required: false, message: $t('allinpay.branchTip'), trigger: 'blur' },
      { min: 2, max: 20, message: $t('allinpay.branchTip2'), trigger: 'blur' },
      { validator: validEmptyTab, trigger: 'blur' }
    ],
    accountNo: [
      { required: false, message: $t('allinpay.pleaseEntePublicAccount'), trigger: 'blur' }
    ],
    parentBankName: [
      { required: false, message: $t('allinpay.pleaseEnterBankName'), trigger: 'change' }
    ],
    unionBank: [
      { required: false, message: $t('allinpay.enterLineNumber'), trigger: 'blur' },
      { min: 12, max: 12, message: $t('allinpay.enterLineNumber2'), trigger: 'blur' }
    ]
  }
})

const bankList = ref([]) // 银行列表 通联
const selectBank = ref('') // 选择的银行，通联

const allinpayStore = useAllinpayStore()
const paySettlementType = computed(() => {
  return allinpayStore.paySettlementType
})

// 签约信息
const contractInfo = reactive({
  contractStartTime: getParseTime(new Date().getTime()),
  contractEndTime: '',
  type: 0
})
// 基础信息验证
const contractInfoRule = reactive({
  contractStartTime: [
    { required: true, message: $t('shopProcess.contractValidityNotEmpty'), trigger: 'change' }
  ],
  type: [
    { required: true, message: $t('shopProcess.selectShopType'), trigger: 'change' }
  ]
})

// 第五步---商家注册信息
const shopUserRegisterInfo = reactive({
  username: '',
  password: '',
  mobile: '',
  validCode: ''
})
// 商家注册信息校验
const shopUserRegisterRule = reactive({
  username: [
    { required: true, message: $t('sys.usernameNotEmpty'), trigger: 'blur' },
    { validator: vaildUserName, trigger: 'blur' }
  ],
  password: [
    { required: true, message: $t('shopProcess.passwordNotEmpty'), trigger: 'blur' },
    { validator: validatePassword, trigger: 'blur' }
  ],
  mobile: [
    { required: true, message: $t('sys.mobilePhoneNoNull'), trigger: 'blur' },
    { validator: validateMobile, trigger: 'blur' }
  ],
  validCode: [
    { required: true, message: $t('home.capNoNull'), trigger: 'blur' },
    { validator: validEmptyTab, trigger: 'blur' }
  ]
})

const show = ref(false)
onMounted(() => {
  show.value = false
  // 请求地址列表
  queryAddressList()
})

// 第一步---基本信息
const addrList = ref([])
/**
 * 请求地址列表
 */
const queryAddressList = () => {
  http({
    url: http.adornUrl('/admin/area/listAreaOfEnable'),
    method: 'get',
    params: http.adornParams()
  }).then(({ data }) => {
    addrList.value = data
  })
}

const endTimeFlag = ref(true)
const endTimeRef = ref(null)

/**
 * 注册资本输入框校验
 */
const changeNum = () => {
  const capital = shopCompany.capital
  shopCompany.capital = checkInput(capital)
  if (Number.parseFloat(shopCompany.capital) === 0) {
    shopCompany.capital = 0
  }
  if (Number.parseFloat(shopCompany.capital) > 99999999) {
    shopCompany.capital = 99999999
  }
}

/**
 * input输入框只允许输入正数和小数(保留小数点后两位)
 */
const checkInput = (num) => {
  if (num) {
    let tmpVal = num.replace(/[^\d^\\.]/g, '')
    const reg = /^(0|([1-9]\d*))(\.\d{1,2})?$/ // 最多允许后输入两位小数
    if (!reg.test(tmpVal)) {
      tmpVal = tmpVal + ''
      tmpVal = tmpVal.substring(0, tmpVal.indexOf('.') + 3)
      const n = (tmpVal.split('.')).length - 1
      if (n > 1) {
        tmpVal = tmpVal.substring(0, tmpVal.indexOf('.'))
      }
    }
    return tmpVal
  } else {
    return ''
  }
}

/**
 * 输入框不允许输入'-'或'+'
 */
const channelInputLimit = (e) => {
  const key = e.key
  if (key === '-' || key === '+') {
    e.returnValue = false
    return false
  }
  return true
}

const signCategoryList = ref([]) // 选中的分类列表
/**
 * 获取签约分类列表
 */
const getSignCategoryList = (categories) => {
  signCategoryList.value = categories
}

const signBrandList = ref([]) // 选中的品牌列表
/**
 * 获取签约品牌列表
 */
const getSignBrandList = (brands) => {
  signBrandList.value = brands
}

const bankCartInfoFormRef = ref(null)
const bankCartInfoForm = reactive({
  data: [
    {
      bankName: '',
      recipientName: '',
      cardNo: '',
      openingBank: ''
    }
  ],
  rule: {
    bankName: [
      { required: false, message: $t('shopProcess.brandNameNotEmpty'), trigger: 'blur' },
      { min: 2, max: 20, message: $t('shopProcess.brandNameErrorTips'), trigger: 'blur' },
      { validator: validEmptyTab, trigger: 'blur' }
    ],
    recipientName: [
      { required: false, message: $t('shopProcess.recipientNameNotEmpty'), trigger: 'blur' },
      { min: 2, max: 20, message: $t('shopProcess.recipientNameInputTips'), trigger: 'blur' },
      { validator: validEmptyTab, trigger: 'blur' }
    ],
    cardNo: [
      { required: false, message: $t('shopProcess.accountNotEmpty'), trigger: 'blur' },
      { min: 8, max: 30, message: $t('shopProcess.bankCardInputTips'), trigger: 'blur' },
      { validator: validEmptyTab, trigger: 'blur' }
    ],
    openingBank: [
      { required: false, message: $t('shopProcess.openingBankNotEmpty'), trigger: 'blur' },
      { min: 2, max: 20, message: $t('shopProcess.openingBankErrorTips'), trigger: 'blur' },
      { validator: validEmptyTab, trigger: 'blur' }
    ]
  }
})
/**
 * 增加银行信息项
 */
const addBankInfo = () => {
  if (bankCartInfoForm.data.length < 5) {
    bankCartInfoForm.data.push(
      {
        bankName: '',
        recipientName: '',
        cardNo: '',
        openingBank: ''
      }
    )
  } else {
    ElMessage({
      message: $t('shopProcess.cardMaxLimitTips'),
      type: 'error',
      duration: 1000
    })
  }
}

/**
 * 删除银行信息项
 * @param {Number} index 索引
 */
const deleteBankInfoItem = (index) => {
  bankCartInfoForm.data.splice(index, 1)
}

const shopCompanyRef = ref(null)
/**
 * 图片的值发生改变，重新校验对应表单字段
 * @param {*} value 图片地址
 * @param {*} prop 检验字段(规则)
 * @param type 归属哪个表单
 */
const imgChange = (value, prop, type) => {
  if (value) {
    if (type === 'shopCompanyRef') {
      shopCompanyRef.value.validateField(prop)
    } else {
      shopDetailRef.value.validateField(prop)
    }
  }
}

// 步骤: 1基本信息 2工商信息 3签约信息 4财务信息 5商家注册信息
const applyStep = ref(1)
/**
 * 上一步
 */
const toPrevStep = () => {
  applyStep.value -= 1
}

const shopUserRegisterInfoRef = ref(null)
const allinpayShopBankCardFormRef = ref(null)
const shopDetailRef = ref(null)
/**
 * 下一步
 */
const toNextStep = () => {
  if (applyStep.value === 2) {
    // 第一步 基本信息
    shopDetailRef.value?.validate((valid) => {
      if (valid) {
        applyStep.value += 1
      }
    })
    return
  }
  if (applyStep.value === 1) {
    // 第二步 工商信息
    shopCompanyRef.value?.validate((valid) => {
      if (valid) {
        if (!shopCompany.businessScope.trim()) {
          ElMessage({
            message: $t('shopProcess.businessScopeNotEmpty'),
            type: 'error',
            duration: 1000
          })
          return
        }
        console.log(shopCompany)
        shopDetail.merchantName = shopCompany.firmName
        applyStep.value += 1
      }
    })
    return
  }
  if (applyStep.value === 3) {
    // 第三步 签约信息
    handleSignedDate()
    return
  }
  if (applyStep.value === 4) {
    //
    if (paySettlementType.value === 1) {
      allinpayShopBankCardFormRef.value.validate((valid) => {
        if (valid) {
          applyStep.value += 1
        }
      })
      return
    }
    bankCartInfoFormRef.value?.validate((valid) => {
      if (valid) {
        applyStep.value += 1
      }
    })
    return
  }
  if (applyStep.value === 5) {
    // 第五步 注册信息
    shopUserRegisterInfoRef.value?.validate((valid) => {
      if (valid) {
        createStore()
      }
    })
  }
}

/**
 * 校验财务账号是否重复
 */
const verifyDuplicates = (row, index) => {
  const bankAccounts = bankCartInfoForm.data
  if (bankAccounts.find((el, idx) => el.cardNo &&
    row.cardNo &&
    el.cardNo === row.cardNo &&
    idx !== index)) {
    bankCartInfoFormRef.value?.validateField('cardNo')
  } else {
    bankCartInfoFormRef.value?.validateField('cardNo')
  }
}

// 第三步---签约信息
let categorySigningList = [] // 签约分类列表
let brandSigningList = [] // 签约品牌列表
/**
 * 签约数据处理
 */
const handleSignedDate = async () => {
  // if (!signCategoryList.value.length) {
  //   ElMessage({
  //     message: $t('shopProcess.selectCategoryTips'),
  //     type: 'error',
  //     duration: 1000
  //   })
  //   return
  // }
  if (signBrandList.value.length) {
    if (signBrandList.value.find(el => !el.qualifications)) {
      ElMessage({
        message: $t('shopProcess.brandAuthorizationNotEmpty'),
        type: 'error',
        duration: 1000
      })
      return
    }
  }
  if (paySettlementType.value !== 1) {
    if (!contractInfo.contractStartTime) {
      ElMessage({
        message: $t('shopProcess.contractValidityNotEmpty'),
        type: 'error',
        duration: 1000
      })
      return
    }
    if (contractInfo.contractEndTime && new Date(contractInfo.contractStartTime).getTime() >= new Date(contractInfo.contractEndTime).getTime()) {
      ElMessage({
        message: $t($t('shopProcess.signingTimeTips')),
        type: 'error',
        duration: 1000
      })
      return
    }
    shopDetail.contractStartTime = contractInfo.contractStartTime
    shopDetail.contractEndTime = contractInfo.contractEndTime
    shopDetail.type = contractInfo.type
  }

  // 分类
  const categories = []
  signCategoryList.value.forEach(el => {
    categories.push({
      categoryId: el.categoryId,
      qualifications: el.qualifications,
      rate: el.customizeRate || '',
      categoryName: el.categoryName,
      parentId: el.parentId
    })
  })
  categorySigningList = categories
  // 品牌
  signBrandList.value.forEach(el => {
    el.type = 0 // 类型 0：平台品牌，1：商城自定义品牌
  })
  brandSigningList = signBrandList.value
  if (paySettlementType.value === 1) {
    getBankList()
  }
  applyStep.value += 1
}

// 正在获取验证码
let waitingReceive = false
// 验证码倒计时
const count = ref('')
let timer = ''
// 展示获取验证码按钮
const showGetCodeBtn = ref(true)
/**
 * 获取注册验证码
 */
const getRegisterCode = () => {
  if (shopUserRegisterInfo.mobile == null || shopUserRegisterInfo.mobile.length === 0) {
    ElMessage({
      message: $t('sys.mobilePhoneNoNull'),
      type: 'error',
      duration: 1000
    })
    return
  }
  if (!isMobile(shopUserRegisterInfo.mobile)) {
    ElMessage({
      message: $t('shopProcess.enterCorrectMobile'),
      type: 'error',
      duration: 1000
    })
    return
  }
  if (waitingReceive) {
    return
  }
  waitingReceive = true
  http({
    url: http.adornUrl('/platform/shopDetail/sendCode'),
    method: 'POST',
    data: http.adornData({
      mobile: shopUserRegisterInfo.mobile,
      shopAccount: 1 // 是否商城账号，1是
    })
  }).then(() => {
    waitingReceive = false
    const timeCount = 60
    if (!timer) {
      count.value = timeCount
      showGetCodeBtn.value = false
      timer = setInterval(() => {
        if (count.value > 0 && count.value <= timeCount) {
          count.value--
        } else {
          clearInterval(timer)
          timer = null
          showGetCodeBtn.value = true
        }
      }, 1000)
    }
  }).catch(() => {
    waitingReceive = false
  })
}

let addIndex = false // 判断是否重复提交创建请求
/**
 * 创建商城
 */
const createStore = () => {
  if (addIndex) {
    return
  }
  addIndex = true
  shopUserRegisterInfoRef.value?.validate((valid) => {
    if (!valid) {
      return
    }
    // 去除密码头尾空格
    const shopUserRegisterInfoPar = JSON.parse(JSON.stringify(shopUserRegisterInfo))
    shopUserRegisterInfoPar.password = encrypt(shopUserRegisterInfoPar.password.trim())
    const data = {
      // 商城基本信息
      shopDetail,
      // 商城工商信息
      shopCompany,
      // 签约分类列表
      categorySigningList,
      // 签约品牌列表
      brandSigningList,
      // 商城银行卡列表
      shopBankCardList: paySettlementType.value !== 1 ? bankCartInfoForm.data : undefined,
      // 商家注册信息
      shopUserRegisterInfo: shopUserRegisterInfoPar,
      // 通联银行卡信息
      allinpayShopBankCardDTO: paySettlementType.value === 1 ? allinpayShopBankCardForm.data[0] : undefined
    }
    http({
      url: http.adornUrl('/platform/shopDetail/createShop'),
      method: 'POST',
      data
    }).then(() => {
      ElMessage({
        message: $t('shopProcess.shopCreatedSuccessfully'),
        type: 'success',
        duration: 1500,
        onClose: () => {
          router.push('/platform/audit-shop/index')
        }
      })
    }).catch(() => {
      addIndex = false
    })
  })
}

// 获取可选银行名称列表（通联）
const getBankList = () => {
  http({
    url: http.adornUrl('/publicBank/list'),
    method: 'get',
    params: http.adornParams()
  }).then(({ data }) => {
    bankList.value = data
  })
}

const changeBank = (value) => {
  allinpayShopBankCardForm.data[0].parentBankName = value
}

const onShopDetailTelInput = e => {
  shopDetail.tel = e.replace(/[^\d]/g, '')
}

const onChangeUse = (value) => {
  if (value == 1) {
    shopDetail.mallVersion = 3
    shopDetail.type = 0
  }
}

const onChangeVer = (value) => {
  if (value != 3) {
    shopDetail.type = 0
  }
}
</script>

<style lang="scss" scoped>
@use "index";
</style>
